<template>
  <el-table
    v-if="goodsSkuList.length > 0"
    ref="goodsSkuTable"
    :data="goodsSkuList"
    style="width:auto;max-width:80%;margin-top:1rem;margin-bottom:2rem;"
    max-height="500"
    border
    stripe
    highlight-current-row
    empty-text
    fit
  >
    <el-table-column
      v-for="(item,index) in tableColumArray"
      :key="index"
      fixed
      :prop="`spec_value_${index}_object.spec_value`"
      :label="item.spec_name"
      width="150"
      align="center"
    />
    <!--  <template slot-scope="scope">
          <div>{{ scope.row.spec_value_0_object.spec_value }}</div>

        </template>
      </el-table-column> -->

    <el-table-column label="sku图片" type="expand" width="100" align="center" fixed>
      <template slot-scope="scope">
        <div class="image_box">
          <el-image
            v-for="(item, key) in scope.row.sku_picture_array"
            :key="key"
            style="width: 100px; height: 100px;margin-right:10px;"
            :src="item.picture"
            fit="fill"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sale_price" label="售价" width="150" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.sale_price" />
      </template>
    </el-table-column>
    <el-table-column prop="market_price" label="市场价" width="150" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.market_price" />
      </template>
    </el-table-column>
    <el-table-column prop="cost_price" label="成本价" width="150" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.cost_price" />
      </template>
    </el-table-column>
    <el-table-column prop="coin" label="系统币" width="150" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.coin" />
      </template>
    </el-table-column>
    <el-table-column prop="deduct_coin" label="抵扣系统币" width="150" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.deduct_coin" />
      </template>
    </el-table-column>
    <el-table-column prop="share_benefit_type" label="佣金扣除类型" width="150" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.share_benefit_type" placeholder="请选择">
          <el-option label="按固定金额" :value="10" />
          <el-option label="按照售价比例" :value="20" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="share_benefit_money" label="佣金扣除金额" width="220" align="center">
      <template slot-scope="scope">
        <div style="display:flex;flex-direction:row">
          <el-input v-model="scope.row.share_benefit_money" />
          <el-tag type="info" style="margin-left:1rem;">单位:元</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="share_benefit_rate" label="佣金扣除比例" width="180" align="center">
      <template slot-scope="scope">
        <div style="display:flex;flex-direction:row">
          <el-input v-model="scope.row.share_benefit_rate" />
          <el-tag type="info" style="margin-left:1rem;">%</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="store_number" label="库存" width="150" align="center">
      <template slot-scope="scope">
        <el-row>
          <el-input v-model="scope.row.store_number" />
        </el-row>
      </template>
    </el-table-column>
    <el-table-column fixed="right" prop="store_warning_number" label="预警库存" width="150" align="center">
      <template slot-scope="scope">
        <el-row>
          <el-input v-model="scope.row.store_warning_number" />
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default
{
  // 组件名称
  name: 'GoodsSku',
  // 组件
  components:
    {
    },
  props:
    {
      // 系统规格数组
      systemSpecNameArray:
      {
        type: Array,
        default: function()
        {
          return []
        }
      },
      // 自定义规格数组
      customSpecNameArray:
      {
        type: Array,
        default: function()
        {
          return []
        }
      },
      // 商品sku列表
      goodsSkuArray: {
        type: Array,
        default: function()
        {
          return []
        }
      }
    },
  // 数据
  data()
  {
    return {
      goodsSkuList: [],
      tableColumArray: [],
      systemSpecNameList: [],
      customSpecNameList: []
    }
  },
  // 计算属性
  computed:
    {
    },
  // 监听
  watch:
    {
    },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {
  },
  // 挂载之前
  beforeMount()
  {
  },
  // 挂载 --常用
  mounted()
  {
    this.goodsSkuList = this.goodsSkuArray

    this.systemSpecNameList = this.systemSpecNameArray
    this.customSpecNameList = this.customSpecNameArray

    const totalSpecNameList = [...this.systemSpecNameList, ...this.customSpecNameList]

    this.tableColumArray = []

    totalSpecNameList.forEach((item, key) =>
    {
      // console.log(item)
      let columnObject = {}

      if (Object.hasOwn(item, 'goods_spec_name_id'))
      {
        columnObject = { goods_spec_name_id: item.goods_spec_name_id, spec_name: item.spec_name }
      }
      else
      {
        if (Object.hasOwn(item, 'id'))
        {
          columnObject = { goods_spec_name_id: item.id, spec_name: item.spec_name }
        }
      }

      this.tableColumArray.push(columnObject)

      // console.log(this.tableColumArray)
      // console.log(this.goodsSkuList)
    })
  },
  // 更新之前
  beforeUpdate()
  {

  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
    {
    }
}
</script>
<style lang='scss' scoped>
.image_box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
